<template>
	<view>
		<view class="container">
			<view class="list" @click="setDetailNum(1)">
				<view class="help-tit">怎么获得佣金？</view>
				<image lazy-load="true"  src="../../static/images/jiantou1.png" class="good-detail"></image>
			</view>
			<view class="list-detail" v-if="detail_num==1">
				<view class="">1.在商城任一页面，点击微信右上角【发送给好友】，进行分享；</view>
				<view class="">2.在【分享专区】或【产品详情页】中，点击分享按钮，使用【海报】、【面对面，扫码购】、【分享好友】等功能进行分享；</view>
			</view>
			<view class="list" @click="setDetailNum(2)">
				<view class="help-tit">佣金金额是多少？</view>
				<image lazy-load="true"  src="../../static/images/jiantou1.png" class="good-detail"></image>
			</view>
			<view class="list-detail"  v-if="detail_num==2">
				<view class="">1.作者在【分享专区】撰写笔记后，他人在本笔记【买同款】购买商品，作者即可获得佣金奖励；</view>
				<view class="">2.他人分享作者笔记，并促成购买，佣金会按一定比例返现到分享者及作者；</view>
			</view>
			<view class="list" @click="setDetailNum(3)">
				<view class="help-tit">我怎么分享活动？</view>
				<image lazy-load="true"  src="../../static/images/jiantou1.png" class="good-detail"></image>
			</view>
			<view class="list-detail"  v-if="detail_num==3">
				<view class="">1.在商城任一页面，点击微信右上角【发送给好友】，进行分享；</view>
				<view class="">2.在【分享专区】或【产品详情页】中，点击分享按钮，使用【海报】、【面对面，扫码购】、【分享好友】等功能进行分享；</view>
			</view>
			<view class="list" @click="setDetailNum(4)">
				<view class="help-tit">作者怎么获得佣金？</view>
				<image lazy-load="true"  src="../../static/images/jiantou1.png" class="good-detail"></image>
			</view>
			<view class="list-detail"  v-if="detail_num==4">
				<view class="">1.作者在【分享专区】撰写笔记后，他人在本笔记【买同款】购买商品，作者即可获得佣金奖励</view>
				<view class="">2.他人分享作者笔记，并促成购买，佣金会按一定比例返现到分享者及作者；</view>
			</view>
			<view class="list" @click="setDetailNum(5)">
				<view class="help-tit">怎么获得首次撰写笔记奖励？</view>
				<image lazy-load="true"  src="../../static/images/jiantou1.png" class="good-detail"></image>
			</view>
			<view class="list-detail"  v-if="detail_num==5">
				<view class="">您需要：1.成功购买商品；2.首次撰写笔记，并且关联该商品；3. 通过分享笔记给好友或将商品海报转发到朋友圈</view>
				<view class="">满足以上条件后，您可获得首次撰写奖励。</view>
			</view>
			<view class="list" @click="setDetailNum(6)">
				<view class="help-tit">怎么获得元宝？</view>
				<image lazy-load="true"  src="../../static/images/jiantou1.png" class="good-detail"></image>
			</view>
			<view class="list-detail"  v-if="detail_num==6">
				<view class="">您可以通过以下方式，获得元宝：</view>
				<view class="">1.分享商品：在商品详情页中，通过分享商品给好友或将商品海报转发到朋友圈，即可获得元宝奖励；</view>
				<view class="">2.撰写笔记：在【分享专区】中，成功撰写一篇笔记，即可获得元宝奖励；</view>
				<view class="">3.评论笔记：在【分享专区】中，成功评论一篇笔记，即可获得元宝奖励；</view>
				<view class="">4.分享笔记：在【分享专区】中，通过分享笔记给好友或将笔记海报转发到朋友圈，即可获得元宝奖励。</view>
			</view>
			<view class="list" @click="setDetailNum(7)">
				<view class="help-tit">元宝如何使用？</view>
				<image lazy-load="true"  src="../../static/images/jiantou1.png" class="good-detail"></image>
			</view>
			<view class="list-detail"  v-if="detail_num==7">
				<view class="">您可以使用元宝在【幸运抽奖】中进行抽奖。</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail_num:0
			}
		},
		onLoad() {
			var self = this;
			// #ifdef H5
			let share_time_line={
				title:self.$request.h5_share_name, // 分享标题
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '我发现了一个很不错的商城，买家具有超大实惠！', // 分享描述
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			// #endif
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {
		      console.log(res.target)
		    }
		    return {
		      title: this.$request.share_title,
		      path: '/pages/index/index'
		    }
		  },
		methods: {
			setDetailNum(num){
				this.detail_num=num
			}
		}
	}
</script>

<style>
.container{
	width: 95%;
	display: flex;
	flex-direction: column;
	margin-left: 2.5%;
	
}
.list{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 25upx 0;
	border-bottom: 1px solid #EEEEEE;
	border-top: 1px solid #EEEEEE;
}
.list-detail{
	font-size: 12px;
	line-height: 16px;
}
.help-tit{
	width: 600upx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #666666;
	font-size: 14px;
}
.good-detail{
	width: 14upx;
	height: 24upx;
	align-self: center;
}
</style>
